<template>
	<view class="feedback">
		<view class="header">
			<image src="https://oss-shop.cciinet.com/files/MiniProgram/back_666.png" mode="" @click="$handleOpenUrl('',2)"></image>
			<view class="text">意见反馈</view>
			<view class="btn" @click="handleSave">
				发送
			</view>
		</view>
		<view class="content">
			<!-- 点击下方“+”号提交截图， -->
			<textarea v-model="textarea" placeholder="请输入问题描述，帮助我们更快定位您的问题" />
			<view class="i">
					{{textarea.length}}/200
			</view>
			<!-- <view class="main_upload">
				<view class="img_preview" v-for="(v, i) in imgArr" :key="v">
					<img :src="v" alt="" />
					<i @click="detele(i)"></i>
				</view>
				<view class="card-upload" v-if="imgArr.length != 5" @click="handleChooseImg">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/upload12.png" mode=""></image>
				</view>
			</view> -->
			<view class="phone">
				<view class="label">
					联系方式
				</view>
				<input type="text" v-model="phone" placeholder="QQ，邮箱，手机"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUploadImage
	} from "@/api/common/index.js";
	export default{
		data() {
			return{
				textarea:"",
				imgArr:[],
				phone:"",
			}
		},
		methods:{
			detele(i) {
				this.imgArr.splice(i, 1);
			},
			handleSave(){
				if(!this.textarea) {
					uni.showToast({
						icon:"none",
						title:"请输入问题描述"
					})
					return;
				}
				// if(this.imgArr.length==0) {
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"请添加证明材料"
				// 	})
				// 	return;
				// }
				if(!this.phone) {
					uni.showToast({
						icon:"none",
						title:"请输入联系方式"
					})
					return;
				}
				
				
				uni.showToast({
					icon:"none",
					title:"举报成功，我们将尽快处理！"
				})
				setTimeout(()=>{
					this.$handleOpenUrl("",2)
				},2000)
			},
			handleChooseImg() {
				uni.chooseImage({
					count: 5,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: "original",
					success: res => {
						let size = parseFloat(res.tempFiles[0].size / 1024 / 1024).toFixed(2)
						if (size > 10) {
							uni.showToast({
								title: '请上传10M以内的图片',
								icon: 'none'
							})
							return
						}
						res.tempFilePaths.map(item => {
							getUploadImage({
								file: item,
							}).then(response => {
								let data = JSON.parse(response)
								if (data.code == 0) {
									this.imgArr.push(data.data.url)
								}
							})
						})
			
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #F7F9FE;
	}
</style>
<style lang="scss" scoped>
	.feedback{
		.header{
			width: 100%;
			background-color: #fff;
			height: 88upx;
			z-index: 9999;
			display: flex;
			align-items:center;
			justify-content: center;
			image{
				width: 18upx;
				height: 34upx;
				position: absolute;
				left: 56upx;
			}
			.text{
				font-size: 36upx;
				color: #333333;
			}
			.btn{
				position: absolute;
				right: 44upx;
				font-size: 28upx;
				color: #666666;
			}
		}
		.content{
			margin: 0 30upx;
			margin-top: 25upx;
			background: #fff;
			textarea{
				padding: 30upx;
				font-size: 28upx;
				color: #999999;
			}
			.i{
				text-align: right;
				margin-right: 30upx;
				
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
			}
			.main_upload {
				height: auto;
				background: #fff;
				margin-top: 2upx;
				display: flex;
				flex-wrap: wrap;
				padding-left: 36upx;
				padding-bottom: 20upx;
				padding-top: 30upx;
				.card-upload {
					width: 148upx;
					height: 148upx;
					border-radius: 8upx;
					display: flex;
					justify-content: center;
					align-items: center;
			
					image {
						width: 148upx;
						height: 148upx;
					}
				}
			
				.img_preview {
					width: 140upx;
					height: 140upx;
					position: relative;
					margin-right: 30upx;
					margin-bottom: 45upx;
			
					img {
						width: 140upx;
						height: 140upx;
					}
			
					i {
						width: 29upx;
						height: 29upx;
						display: inline-block;
						background: url("https://oss-shop.cciinet.com/files/MiniProgram/delete_icon.png") no-repeat;
						background-size: 100% 100%;
						position: absolute;
						right: -14upx;
						top: -14upx;
					}
				}
			
				.img_preview:nth-child(4n) {
					margin-right: 0;
				}
				
			}
			.phone{
				display: flex;
				margin-top: 33upx;
				padding-bottom: 33upx;
				margin-left: 33upx;
				input{
					padding-left: 33upx;
				}
			}
		}
	}
</style>
